<template>
	<view class="member-page">
		<view class="rule-text" @tap="jump('/pages/member/rules')">规则</view>
		<scroll-view class="prefer-scroll" scroll-x="true" @scroll="onScroll" :scroll-into-view="'level_' + active">
			<view class="level-container">
				<view class="level-item" v-for="(item, index) in levels" :id="'level_' + item.level" :key="index" @tap="onClick(item,index)">
					<image class="level-icon" :src="active === item.level ? item.activeIcon : item.icon"></image>
				</view>
			</view>
		</scroll-view>
		<view class="card">
			<view class="card-top">
				<image class="top-img" mode="aspectFit" src="../../static/images/member/membership.png"></image>
			</view>
			<view class="ship-box">
				<view class="ship-item" v-for="(item, index) in ships" :key="index">
					<image class="ship-icon" :src="item.icon"></image>
					<view>{{ item.name }}</view>
          <view style="margin-top: 16rpx">{{ item.name1 }}</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="card-top">
				<image class="top-img" mode="aspectFit" src="../../static/images/member/member-up.png"></image>
			</view>
			<view class="container">
				<view class="item">
					<view class="ziliao">1、完善个人资料 <view class="editbtn" v-if="user_level.userinfo_complete == 1"  @tap="jump('/pages/member/info?type=edit')">编辑 </view> </view>
					<image v-if="user_level.userinfo_complete == 1" class="img" src="../../static/images/member/icon-finished.png"></image>
					<view v-else class="btn" @tap="jump('/pages/member/info')">去完成</view>
				</view>
				<view class="item" v-if="currentIndex!='-1'|| active!='-1'">
					<view>
						<view>2、{{currentIndex==levels.length-1||currentIndex>active? `已经邀请${current.need_invite}人且首次消费`:active==levels.length-1?`星曜已是最高等级~`:`邀请${current.need_invite}人且首次消费` }}</view>
						<view class="item-padding">（1）已邀请成功{{ user_level.invite_success }}人</view>
						<view class="item-padding">（2）完成首次消费{{ user_level.first_consume_users }}人</view>
					</view>
					<view class="btn" @tap="jump('/pages/member/invite')">去邀请</view>
				</view>
			</view>
		</view>
    <!--   购物车的按钮-->
    <shopro-float-shopcart-btn></shopro-float-shopcart-btn>
	</view>
</template>

<script>
	const iconPath = '../../static/images/member'
	export default {
		data() {
			return {
				active: 0,
				levels: [{
					name: '入会',
					level: 0,
					icon: `${iconPath}/level-0.png`,
					activeIcon: `${iconPath}/level-0-active.png`,
					ships: [
						//{ icon: `${iconPath}/icon-member-info.png`, name: '完善个人资料' },
						//{ icon: `${iconPath}/icon-poster.png`, name: '生成专属推广海报' },
						{ icon: `${iconPath}/icon-member-use.png`, name: '29.9轻享全系正装产品',name1:'（限一次）'  },
						{ icon: `${iconPath}/icon-sales.png`, name: '溯源系列享9折优惠' },
					]
				}, {
					name: '青铜',
					level: 1,
					icon: `${iconPath}/level-1.png`,
					activeIcon: `${iconPath}/level-1-active.png`,
					ships: [
						//{ icon: `${iconPath}/icon-member-info.png`, name: '完善个人资料' },
						//{ icon: `${iconPath}/icon-poster.png`, name: '生成专属推广海报' },
						{ icon: `${iconPath}/icon-member-use.png`, name: '29.9轻享全系正装产品',name1:'（限一次）'  },
						{ icon: `${iconPath}/icon-sales.png`, name: '溯源系列享9折优惠' },
						{ icon: `${iconPath}/icon-gift.png`, name: '入会礼遇' }
					]
				}, {
					name: '白银',
					level: 2,
					icon: `${iconPath}/level-2.png`,
					activeIcon: `${iconPath}/level-2-active.png`,
					ships: [
						//{ icon: `${iconPath}/icon-member-info.png`, name: '完善个人资料' },
						//{ icon: `${iconPath}/icon-poster.png`, name: '生成专属推广海报' },
						{ icon: `${iconPath}/icon-member-use.png`, name: '29.9轻享全系正装产品',name1:'（限一次）'  },
						{ icon: `${iconPath}/icon-sales.png`, name: '溯源系列享8.5折优惠' },
						{ icon: `${iconPath}/icon-gift.png`, name: '入会礼遇' },
						{ icon: `${iconPath}/icon-cupon.png`, name: '每月10元商品抵扣券' },
						{ icon: `${iconPath}/icon-birthday.png`, name: '生日月礼包礼遇' },
					]
				}, {
					name: '黄金',
					level: 3,
					icon: `${iconPath}/level-3.png`,
					activeIcon: `${iconPath}/level-3-active.png`,
					ships: [
						//{ icon: `${iconPath}/icon-member-info.png`, name: '完善个人资料' },
						//{ icon: `${iconPath}/icon-poster.png`, name: '生成专属推广海报' },
						{ icon: `${iconPath}/icon-member-use.png`, name: '29.9轻享全系正装产品',name1:'（限一次）'  },
						{ icon: `${iconPath}/icon-sales.png`, name: '溯源系列享8.5折优惠' },
						{ icon: `${iconPath}/icon-gift.png`, name: '入会礼遇' },
						{ icon: `${iconPath}/icon-cupon.png`, name: '每月10元商品抵扣券' },
						{ icon: `${iconPath}/icon-birthday.png`, name: '生日月礼包礼遇' },
						// { icon: `${iconPath}/icon-gift.png`, name: '每月80元奖励金' },
						{ icon: `${iconPath}/icon-gift.png`, name: '年终福包礼遇' },
            { icon: `${iconPath}/icon-store.png`, name: '5%权衡奖励' },
					]
				}, {
					name: '钻石',
					level: 4,
					icon: `${iconPath}/level-4.png`,
					activeIcon: `${iconPath}/level-4-active.png`,
					ships: [
						//{ icon: `${iconPath}/icon-member-info.png`, name: '完善个人资料' },
						//{ icon: `${iconPath}/icon-poster.png`, name: '生成专属推广海报' },
						{ icon: `${iconPath}/icon-member-use.png`, name: '29.9轻享全系正装产品',name1:'（限一次）'  },
						{ icon: `${iconPath}/icon-sales.png`, name: '溯源系列享8折优惠' },
						{ icon: `${iconPath}/icon-gift.png`, name: '入会礼遇' },
						{ icon: `${iconPath}/icon-gift.png`, name: '生日月礼包礼遇' },
						{ icon: `${iconPath}/icon-store.png`, name: '全域内自选门店的1份分红权' },
						{ icon: `${iconPath}/icon-gift.png`, name: '1年4次季度礼遇' },
						{ icon: `${iconPath}/icon-gift.png`, name: '1年2次福包礼遇' },
						{ icon: `${iconPath}/icon-head.png`, name: '专属服务礼遇+1' },
            { icon: `${iconPath}/icon-store.png`, name: '10%权衡奖励' },
            { icon: `${iconPath}/icon-member-use.png`, name: '1.2倍积分' },
					]
				}, {
					name: '星耀',
					level: 5,
					icon: `${iconPath}/level-5.png`,
					activeIcon: `${iconPath}/level-5-active.png`,
					ships: [
						//{ icon: `${iconPath}/icon-member-info.png`, name: '完善个人资料' },
						//{ icon: `${iconPath}/icon-poster.png`, name: '生成专属推广海报' },
						{ icon: `${iconPath}/icon-member-use.png`, name: '29.9轻享全系正装产品',name1:'（限一次）' },
						{ icon: `${iconPath}/icon-sales.png`, name: '溯源系列享8折优惠' },
						{ icon: `${iconPath}/icon-gift.png`, name: '入会礼遇' },
						{ icon: `${iconPath}/icon-birthday.png`, name: '生日月礼包礼遇' },
						{ icon: `${iconPath}/icon-store.png`, name: '全域内自选门店的3份分红权' },
						{ icon: `${iconPath}/icon-gift.png`, name: '1年4次季度礼遇' },
						{ icon: `${iconPath}/icon-gift.png`, name: '1年4次福包礼遇' },
						{ icon: `${iconPath}/icon-head.png`, name: '无限期的专属服务礼遇+3' },
            { icon: `${iconPath}/icon-store.png`, name: '15%权衡奖励' },
            { icon: `${iconPath}/icon-member-use.png`, name: '1.5倍积分' },
					]
				}],
				ships: [],
				user_level: {},
				current: {},
        currentIndex:0,
			};
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				this.$https('member.levels', {}, '加载中...')
					.then(res => {
						if (res.code === 1) {
						  let current_level = JSON.parse(JSON.stringify( res.data.user_level.current_level))
							this.active = current_level
              this.currentIndex = res.data.user_level.current_level
							this.initLevel(res.data.level_cfg || [])
							this.user_level = res.data.user_level
						}
					})

			},
			initLevel(list) {
			  //赋值阶段
				this.levels.forEach((item, index) => {
					const level = list[index]
					if (level) {
						item.level = level.id
						item.name = level.name
						item.need_invite = level.need_invite
						item.first_consume_users = level.first_consume_users
					}
				})
        //处理数据阶段
        this.levels.forEach((item,index)=>{
          if (item.level === this.active) {
            this.onClick(item,index)
          }
          if(this.active == '-1'){
            this.$set(this.current,'need_invite',0)
          }
        })
				this.ships = this.levels[this.active === -1 ? 0 : this.active].ships
				if (this.ships.length % 2 != 0) {
					this.ships.push({icon: '', name: ''})
				}
			},
			jump(path, query) {
				this.$Router.push({
					path: path,
					query: query
				});
			},
			onClick(item,index) {
			  let items = JSON.parse(JSON.stringify(item))
        this.current = items
        if(index == this.levels.length-1){
        }else{
          let num =this.levels[index+1].need_invite&&this.levels[index+1].need_invite!='undefined'?this.levels[index+1].need_invite:'0'
           this.$set(this.current,'need_invite',num)
        }
				this.active = item.level
        this.ships = JSON.parse(JSON.stringify(item.ships))
				if (this.ships.length % 2 != 0) {
					this.ships.push({icon: '', name: ''})
				}
			},
			onScroll() {

			}
		}
	}
</script>

<style lang="scss" scoped>
.member-page {
	background: #010101;
	padding-bottom: 80upx;
	min-height: 100%;
	.rule-text {
		padding: 12upx 32upx 0 0;
		text-align: right;
		font-size: 28upx;
		font-weight: 400;
		color: #B5B5B5;
		line-height: 40upx;
	}
	.prefer-scroll {
		padding-left: 32upx;
		padding-right: 32upx;
		padding-top: 50upx;
		margin-bottom: 48upx;
		white-space: nowrap;
		.level-container {
			display: flex;
			.level-item {
				margin-right: 16upx;
				.level-icon {
					width: 320upx;
					height: 160upx;
				}
			}
		}
	}
	.card {
		padding-bottom: 32upx;
		margin: 0 auto 24upx auto;
		width: 686upx;
		background: #FFFFFF;
		border-radius: 32upx;
		.card-top {
			padding-top: 32upx;
			text-align: center;
			.top-img {
				width: 280upx;
				height: 28upx;
			}
		}
	}
	.ship-box {
		margin-top: 44upx;
		display: grid;
		grid-template-columns: 50% 50%;
		grid-gap: 1upx;
		font-size: 28upx;
		font-weight: 500;
		color: #333333;
		background-color: #E5E5E5;
		line-height: 28upx;
		.ship-item {
			padding: 32upx 0;
			text-align: center;
			background-color: #FFFFFF;
			// border-left: 1upx solid #E5E5E5;
			// border-right: 1upx solid #E5E5E5;
			// border-bottom: 1upx solid #E5E5E5;
			.ship-icon {
				margin-bottom: 32upx;
				width: 80upx;
				height: 80upx;
			}
		}
	}
	.container {
		padding: 0 32upx;
		.item {
			margin-top: 32upx;
			display: flex;
			justify-content: space-between;
			font-size: 28upx;
			font-weight: 400;
			color: #010101;
			line-height: 40upx;
			.item-padding {
				padding-top: 16upx;
				padding-left: 32upx;
			}
			.img {
				width: 80upx;
				height: 66upx;
			}
			.btn {
				width: 136upx;
				height: 56upx;
				background: #F5F5F5;
				border-radius: 32upx;
				font-size: 24upx;
				font-weight: 500;
				color: #010101;
				line-height: 56upx;
				text-align: center;
			}
		}
	}
}
.ziliao{
  display: flex;
  align-items: center;
  .editbtn{
    padding: 6rpx 14rpx;
    margin-left: 14rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F5F5F5;
    border-radius: 10rpx;
  }
}
</style>
